import React, { Component } from 'react'
import { connect } from 'dva';
import Link from 'umi/link';
import { Form, Input, Select } from 'antd';
import { SearchRow, SearchCol, SearchButton } from '@/styled/form';
import { DropDownSelect, DropDownSelectObj } from '@/components/DropDownSelect/index';
import { DICT } from '../enum';

interface IProps {
  current: number,
  form: any,
  dispatch?: Function,
  initCurrent: Function,
  new: boolean,
  dict?: Object,
  cond?: any,
}

const FormItem = Form.Item;

@connect(({ person }) => ({
  dict: person.dict,
  cond: person.cond,
	roomList: person.roomList || []

}))
class Search extends Component<IProps> {

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
			type: 'person/queryFireRoomList',
		})
    dispatch({
      type: 'person/queryDict',
      payload: {
        keyList: DICT
      }
    }).then(() => {
      const { cond, form } = this.props;
      const { pageNum, pageSize, ...searchParams } = cond;
      form.setFieldsValue(searchParams);
    });
  }
  private handleChange = (type: string, value: number | string) => {
    const { cond = {}, dispatch } = this.props;
    cond[type] = value;

    dispatch({
      type: 'person/updateCond',
      payload: cond
    })
  }
  search = e => {
    e.preventDefault();
    const { dispatch } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        dispatch({
          type: 'person/updateCond',
          payload: {
            ...values
          }
        })

        this.props.initCurrent()
      }
    });
  };

  render() {
    const { dict = {}, roomList } = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
    return (
      <Form onSubmit={this.search}>
        <SearchRow>
          <SearchCol key={4} span={4}>
            <FormItem
              label="岗位"
              {...formItemLayout}
            >
              {getFieldDecorator('position', {
                rules: [{ message: '输入岗位' }],
              })(
                DropDownSelectObj({
                  dict, type: 'user.position',
                  onChange: (v) => this.handleChange('position', +v)
                })
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={1} span={4}>
            <FormItem
              style={{marginLeft: 40}}
              label="所属消控室"
              {...formItemLayout}
            >
              {getFieldDecorator('fireRoomId', {
                // rules: [{ message: '输入消控室' }],
              })(
                <Select  placeholder="请选择所属消控室" onChange= {(v) => this.handleChange('fireRoomId', v)}>
                {roomList.map((item) => (
                  <Select.Option value={item.id} key={item.id}>
                    {item.name}
                  </Select.Option>
                ))}
              </Select>
              )}
            </FormItem>
          </SearchCol>

          <SearchCol key={7} span={16}>
            <SearchRow type="flex" justify="end">
              <SearchButton icon='search' htmlType="submit">搜索</SearchButton>
              <SearchButton onClick={(e) => {
                this.props.form.resetFields();
                this.search(e)
              }} style={{ marginLeft: '15px' }} icon='redo'>重置</SearchButton>
              {
                this.props.new && <Link to='/data/person/new' style={{ marginLeft: '15px' }}>
                  <SearchButton icon='plus' type="primary">新增</SearchButton>
                </Link>
              }
            </SearchRow>
          </SearchCol>

        </SearchRow>
      </Form>
    );
  }
}

const SearchS = Form.create<IProps>()(Search);
export default SearchS;
